<template>
  <div class="time-change-parent-div">
    <el-card shadow="always" style="background-color: #f5f5f5">
      <el-row class="el-row-view">
        <el-col :span="12">
          <el-card shadow="hover">
            <el-text class="mx-1" size="large">时间戳(13位)：</el-text>
            <el-text class="mx-1" type="success" size="large">{{ currentTimeSpace }}</el-text>
            <el-text class="mx-1" style="margin-left: 50px" size="large">时间戳(10位)：</el-text>
            <el-text class="mx-1" type="success" size="large">{{ tenCurrentTimeSpace }}</el-text>
          </el-card>
        </el-col>
        <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
          <el-card shadow="hover">
            <el-text class="mx-1" size="large">时间：</el-text>
            <el-text class="mx-1" type="success" size="large">{{ currentTime }}</el-text>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="el-row-view" style="margin-top: 40px">
        <el-col :span="12">
          <el-card shadow="hover">
            <el-input v-model="inputTime" style="max-width: 400px" placeholder="10位或13位">
              <template #prepend>时间戳</template>
            </el-input>
            <el-button type="primary" style="margin-left: 20px" @click="changeBtn">转换</el-button>
          </el-card>
        </el-col>
        <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
          <el-card shadow="hover" style="padding-top: 3px; padding-bottom: 3px">
            <el-text class="mx-1" size="large">时间：</el-text>
            <el-text class="mx-1" type="success" size="large">{{ changeTime }}</el-text>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="el-row-view" style="margin-top: 40px">
        <el-col :span="12">
          <el-card shadow="hover">
            <el-input v-model="inputDay" style="max-width: 400px" placeholder="日期和时间">
              <template #prepend> 时 间 </template>
            </el-input>
            <el-button type="primary" style="margin-left: 20px" @click="changeDayBtn"
              >转换</el-button
            >
          </el-card>
        </el-col>
        <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
          <el-card shadow="hover" style="padding-top: 3px; padding-bottom: 3px">
            <el-text class="mx-1" size="large">时间戳(10位)：</el-text>
            <el-text class="mx-1" type="success" size="large">{{ tenDayTimeSpace }}</el-text>
            <el-text class="mx-1" style="margin-left: 50px" size="large">时间戳(13位)：</el-text>
            <el-text class="mx-1" type="success" size="large">{{ dayTimeSpace }}</el-text>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'

const currentTimeSpace = Date.now()
const tenCurrentTimeSpace = Math.floor(currentTimeSpace / 1000)

const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss')

const inputTime = ref('')
const inputDay = ref('')
const changeTime = ref('')
const dayTimeSpace = ref('')
const tenDayTimeSpace = ref('')

const changeBtn = () => {
  let timeValue = parseInt(inputTime.value)
  if (inputTime.value.length === 10) {
    timeValue *= 1000
  }
  let obj = dayjs(timeValue)

  changeTime.value = obj.format('YYYY-MM-DD HH:mm:ss')
}
const changeDayBtn = () => {
  let timestampInSeconds = dayjs(inputDay.value).unix()
  dayTimeSpace.value = timestampInSeconds + '000'
  tenDayTimeSpace.value = timestampInSeconds + ''
}
</script>

<style>
.time-change-parent-div {
  width: 100%;
  height: 100%;
}

.el-row-view {
  flex: 1;
}
</style>
